<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    {{--<meta name="viewport" content="width=device-width, initial-scale=1">--}}
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>充值中心</title>
    <script src="{{ asset('js/common.js') }}?v=202006131154" type="text/javascript"></script>
    <!-- Fonts -->
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}?v=202006131150">
    <script src="{{ asset('js/jquery.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/ewin.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jweixin-1.0.0.js') }}" type="text/javascript"></script>

    <!-- Styles -->

    <style>
        .page-section {
            background: rgb(255, 255, 255);
            border: 1px solid rgb(221, 221, 221);
            margin-bottom: 1px;
            margin: 10px;
        }

        button {
            padding: 5px;
        }

        .h-title {
            padding: 10px 10px;
        }
        @media screen and (max-device-width:320px){
            .base-info {
                width: 50px;
            }
        }
        @media screen and (min-width:321px){
            .base-info {
                width: 72px;
            }
        }
        .base-info {
            height: 32px;
            line-height: 32px;
            font-size: 16px;
            float: left;
            text-align: center;
        }

        .form-row-productName {
            width: 100%;
            margin-top: 5px;
            line-height: 32px;
            height: 35px;
        }

        .package-title {
            display: -webkit-box;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .base-info input {
            font-size: 16px;
        }

        .form-status-content {
            width: 100%;
            line-height: 32px;
        }
        .form-row{
            width: 100%;
            float: left;
        }
        .form-status-content .status {
            height: 32px;
            width: 220px;
            font-size: 16px;
            line-height: 32px;
            margin-left: 10px;
        }

        .form-status-content .detail {
            color: #2db7f5;
            text-align: center;
            font-size: 16px;
            margin-left: 50px;
            width: 140px;
            height: 32px;
            padding: 5px;
            /* float: right; */
            line-height: 20px;
        }

        .account-input{
            height: 32px;
            width: 50%;
            float: left;
        }
        .account-input input {
            font-size: 16px;
            height: 32px;
            width: 100%;
        }

        .zone_name {
            font-weight: bold;
        }

        .nav li a {
            color: #000000;
        }

        .zone_items {
            font-size: 16px;
            flex-wrap: wrap;
            margin: 10px 0 10px 10px;
        }

        .zone_items .zone_item {
            padding: 5px;
            border: 1px dashed #b0b0b0;
            margin-right: 5px;
            display: inline-block;
        }

        .zone_items .active {
            border: 1px solid #ff6700;
            color: #ff6700 !important;
        }

        .item-ans {
            width: 100%;
            font-size: 16px;
            justify-content: space-between;
            box-sizing: border-box;
            height: 100px;
            align-items: center;
            border-bottom: 1px solid #ddd;
        }

        .product-info {
            width: 100%;
            -webkit-box-pack: justify;
            margin: 0.3rem;
            box-sizing: border-box;
            height: 180px;
            line-height: 180px;
        }

        .product-name {

            display: block;
            /*内联对象需加*/
            white-space: nowrap;
            /* 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。不换行 */
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            float: left;
            line-height: 39px;
            /* 不换行 */
            -webkit-box-orient: vertical;
            margin-left: 10px;
        }

        .product-price {
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
            border-radius: 60px;
            border: 1px solid #FF6A00;
            color: #FF6A00;
            float: right;
            /*margin-right: 34px;*/
            margin-top: 4px;
        }

        .buy-info-product view {
            width: 615px;
            margin-left: 40px;
            float: left;

            text-overflow: ellipsis;
            overflow: hidden;
        }

        .buy-info-money view {
            float: left;

            margin-left: 40px;
        }

        #myTab {
            font-size: 16px;
            margin: 0 10px;
        }

        label {
            font-weight: normal;
        }

        .radio_type {
            width: 20px;
            height: 20px;
            appearance: none;
            position: relative;
            float: left;
            top: 4px;
        }

        .radio_type:before {
            content: '';
            width: 20px;
            height: 20px;
            /*border: 1px solid #7d7d7d;*/
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
        }

        .radio_type:checked:before {
            content: '';
            width: 20px;
            height: 20px;
            background: #FF6A00;
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
        }

        .radio_type:checked:after {
            content: '';
            width: 10px;
            height: 5px;
            border: 2px solid white;
            border-top: transparent;
            border-right: transparent;
            text-align: center;
            display: block;
            position: absolute;
            top: 6px;
            left: 5px;
            vertical-align: middle;
            transform: rotate(-45deg);
        }

        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
            border-bottom: 1px solid #FF6A00;
            border-top: none !important;
            border-left: none !important;
            border-right: none !important;

            color: #ff6700 !important;
        }

        .nav-tabs > li {
            display: block;
            float: left;
            height: 40px;
        }

        .tab-pane ul {
            list-style: none;
        }

        .nav-tabs > li > a {
            border-radius: 0px !important;
            padding: 8px 15px;
        }

        .nav > li > a:focus, .nav > li > a:hover {
            background: #FFF !important;
        }

        .tab-content {
            min-height: 130px;
            overflow-y: scroll;
            border-top: 1px solid rgb(221, 221, 221);
        }

        #buyButton {
            width: 95%;
            margin: 10px;
            border: none;
            background: #FF6A00;
            color: #ffffff;
            height: 50px;
            line-height: 25px;
        }

        .product-list {
            float: left;
            width: 100%;
            height: 50px;
            margin-left: -20px;
            margin-top: 10px;
            border-bottom: 1px solid #ddd;
        }
        input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; }
        /*.zone-select,.package-select{*/
        /*display: none;*/
        /*}*/
        .btn-success{
            color: #fff;
            background-color: #FF6A00;
            border-color: #FF6A00;
        }
        .btn-info{
            color: #fff;
            background-color: #FF6A00;
            border-color: #FF6A00;
        }
        .input-group-addon{
            padding: 0px 5px !important;
        }

        .btn-success:hover{
            color: #fff;
            background-color: #FF6A00;
            border-color: #FF6A00;
        }

    </style>
</head>
<body>
<div>
    <div class="page">
        <form>
            <div class="page-section" style="min-height:140px;">
                <div class="zone_name h-title">卡信息</div>
                <div class="form-row">
                    <span class="base-info">卡号</span>
                    <div class="account-input">
                        <input name="account" placeholder="  输入卡号" style="border: 1px solid rgb(221,221,221);"/>
                    </div>
                    <input name="imsi" type="hidden"/>
                    <div style="width:15%;height:34px;padding: 0 5px;float: left">
                        <span class="input-group-addon" id="saoyisao" style="background-image:url({{URL::asset('images/sys.png')}});background-size: 100% 100%;width: 34px;height:34px;border:none;"></span>
                    </div>
                    <button type="button" class="btn btn-default" id="reload" style="float: left;padding: 6px;!important;">刷新</button>
                </div>
                {{--<div class="form-row">--}}
                    {{--<div class="base-info">套餐</div>--}}
                    {{--<div class="form-row-productName">--}}
                        {{--<div class="package-title"></div>--}}
                    {{--</div>--}}
                {{--</div>--}}
                <div class="form-row" style="margin-top: 10px">
                    <div class="base-info">状态</div>
                    <div class="form-status-content">
                        <span class='status'></span>
                        <span class="detail">查看详情</span>
                    </div>
                </div>
            </div>
            <div class="page-section zone-select zone-recharge" style="display: none;">
                <div class="zone_name h-title">地区选择</div>
                {{--<a href="javascript:void(0)" onclick="getMore('all')" class="more-class" style="float: right;z-index: 1;display: inline-block;position: relative;margin: -30px 10px;">--}}
                   {{--更多--}}
                    {{--</a>--}}
                <div class="zone_items">
                </div>
            </div>
            <div class="page-section package-select package-recharge" style="display: none;">
                <div class="zone_name h-title">套餐选择</div>
                <div class="tab-product" style="padding:5px 0 20px 0;border-bottom: 1px solid #ddd;min-height: 100px">
                    <ul class="nav nav-tabs" id="myTab">
                    </ul>
                    {{--<div class="dropdown" style="margin: 10px;">--}}
                        {{--<button class="btn- btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="border: none;">--}}
                            {{--排序--}}
                            {{--<span class="caret"></span>--}}
                        {{--</button>--}}
                        {{--<ul class="dropdown-menu"  id="ddmenu" style="margin-top: -1px;min-width: 100px !important;">--}}
                            {{--<li><a href="#">默认排序</a></li>--}}
                            {{--<li><a href="#">按价格降序</a></li>--}}
                            {{--<li><a href="#">按价格升序</a></li>--}}
                        {{--</ul>--}}
                    {{--</div>--}}

                    <div class="tab-content">
                    </div>
                </div>
                {{--<div class="page-section"><input type="button" id="buyButton" name="submit" value="立即充值"></div>--}}
            </div>
        </form>
    </div>
</div>
<!-- loading -->
<div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop='static'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                正在加载，请稍候...<span id="result"></span>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="recharge-loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop='static'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                正在充值 ，请稍候...<span id="result"></span>
            </div>
        </div>
    </div>
</div>
<!--模态框组件-->
<div class="modal fade" id="myModal" style="margin-top: 50px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>提示</h3>
            </div>
            <div class="modal-body">
                <p id="message-content"></p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-info" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<div id="alert"></div>

</body>
</html>
<script>
    wx.config({
        debug: false,
        appId: '{{$configData['appId']}}',
        timestamp: '{{$configData['timestamp']}}',
        nonceStr: '{{$configData['nonceStr']}}',
        signature: '{{$configData['signature']}}',
        jsApiList: [
            'checkJsApi',
            'scanQRCode'
        ]
    });
    // getZoneList('all',0);
    $('#alert').html('<div style="text-align: center;color:red">请扫一扫或输入要充值的卡号！</div>').addClass('alert-warning').show();
    var openid = '{{$configData['openid']}}';
    var account = '';
    var imsi = '';
    $("input[name='account']").bind('input propertychange', function () {
        account = $(this).val().replace(/(^\s*)|(\s*$)/g, "");
        if (account && account.length == 16) {
            ServerQueryAccount(account);
        }
        $("input[name='account']").attr('value', account);
        $('#alert').fadeOut();
    });
    $('#reload').click(function () {
        account = $("input[name='account']").val().replace(/(^\s*)|(\s*$)/g, "");
        if (!account) {
            $("#message-content").text("请输入卡号...");
            $("#myModal").modal();
            return;
        }
        if(account && account.length > 16){
            $("#message-content").text("卡号不符合规范");
            $("#myModal").modal();
            return;
        } else {
            if (account && account.length == 16) {
                ServerQueryAccount(account);
            }
        }

    });
    $('.detail').click(function (e) {
        if (!account) {
            $("#message-content").text("请输入卡号...");
            $("#myModal").modal();
            return;
        }
        $(location).attr('href', URL + '/recharge?action=detail&account=' + account);
    });

    function rechargeByBuy(){
        if (!account) {
            $("#message-content").text("请输入卡号...");
            $("#myModal").modal();
            return;
        }
        if ($("input[type='radio']:checked").length == 0) {
            $("#message-content").text("请选择套餐...");
            $("#myModal").modal();
            return;
        }
        var product_name = $("input[type='radio']:checked").siblings('.product-name').text();
        var product_price = $("input[type='radio']:checked").siblings('.product-price').text();
        var zones_str = $("input[type='radio']:checked").siblings("input[name='zones_str']").val();
        var valid_days = $('#myTab .active>a').text().match(/\d+/)[0];
        Ewin.confirm({
            message: '<p style="font-weight: bold">请确认提交信息：</p>' +
            '<p><span class="confirm-title">套餐名：</span><span style="color: #ff6a00;">' + product_name + '</span></p><p> <span class="confirm-title">金额：</span><span style="color: #ff6a00;">' + product_price + '</span></p>' +
            '<p><span class="confirm-title">天数：</span>'+valid_days+'天</p>'+
            '<p><span class="confirm-title">通用地区：</span>'+zones_str+'</p>'
        }).on(function (e) {
            if (!e) {
                return;
            }
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
        });
    }
    function onBridgeReady() {
        var out_trade_no = '';
        $.ajax({
            type: "get",
            url: URL + '/tradeNo',
            success: function (c) {
                out_trade_no = c.out_trade_no;
                var product_name = $("input[type='radio']:checked").siblings('.product-name').text();
                var product_price = $("input[type='radio']:checked").siblings('.product-price').text();
                var productId = $("input[type='radio']:checked").val();
                var provider = $("input[type='radio']:checked").siblings("input[name='provider_type']").val();
                var valid_days = $('#myTab .active>a').text().match(/\d+/)[0];
                var total_fee = parseInt(product_price * 100);
                var body = 'SCT充值';
                imsi = $("input[name='imsi']").val().replace(/(^\s*)|(\s*$)/g, "");
                if(!productId){
                    return;
                }
                $.ajax({
                    type: "post",
                    url: URL + '/createOrder',
                    data: {
                        out_trade_no: out_trade_no,
                        total_fee: total_fee,
                        body: body,
                        openid: openid,
                        vc_product_name:product_name,
                        vc_account:account,
                        i_valid_days: valid_days,
                        i_product_id:productId,
                        product_price:product_price,
                        type:1,
                        vc_imsi:imsi,
                        provider:provider
                    },
                    success: function (data) {
                        var order = data.jsApiParameters;
                        var out_trade_no = data.order;
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                                "appId": order.appId,     //公众号名称，由商户传入
                                "timeStamp": order.timeStamp, //时间戳，自1970年以来的秒数
                                "nonceStr": order.nonceStr, //随机串
                                "package": order.package,
                                "signType": "MD5",         //微信签名方式：
                                "paySign": order.paySign  //微信签名
                            },
                            function (res) {
                                // $(location).attr('href', 'http://www.baidu.com');
                                if (res.err_msg == "get_brand_wcpay_request:ok") {
                                //     // 使用以上方式判断前端返回,微信团队郑重提示：
                                //     //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                    payResult(out_trade_no);
                                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                                    $("#message-content").text("充值已取消");
                                    $("#myModal").modal();
                                } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                                    $("#message-content").text("充值失败，请联系客服");
                                    $("#myModal").modal();
                                }
                            });
                    }
                });
            },
            error: function () {
                $("#message-content").text("下单失败，请联系客服");
                $("#myModal").modal();
                return;
            }
        });

    }
    function payResult(orderId) {
        $('#recharge-loading').modal('show');
        $.ajax({
            type: "get",
            url: URL + '/payResult',
            data: {"order_id": orderId},
            success: function (res) {
                if(res.trade_state=='SUCCESS'){
                    doRecharge(orderId);
                    setTimeout(function () {
                        $('#recharge-loading').modal('hide');
                    }, 5000);
                }
            },
            error: function () {
                $('#recharge-loading').modal('hide');
                $("#message-content").empty();
                $("#message-content").append('<span style="color:red;font-weight: bolder;">充值失败，请联系客服</span>');
                $("#myModal").modal();
            }
        });
    }
    function doRecharge(orderId) {
        $.ajax({
            type: "POST",
            url: URL + '/doRecharge',
            data: {order_id: orderId},
            success: function (data) {
                if(data.successRows==1){
                    Ewin.confirm({
                        message: '<span style="color:#2db7f5;font-weight: bolder;">充值成功! 您是否查看详情？</span>'
                    }).on(function (e) {
                        if (!e) {
                            return;
                        }
                        $(location).attr('href', URL + '/recharge?action=detail&account=' + account);
                    });
                }else{
                    var msg = '<span style="color:red;font-weight: bolder;">充值失败</span>';
                    if(data.failure && data.failure[0].msg=='The agent did not sell the specified product'){
                        msg += '：套餐参数错误，请联系客服';
                    } else if(data.failure && data.failure[0].msg=='Account does not exist'){
                        msg += '：卡号不存在，请联系客服';
                    }
                    $("#message-content").empty();
                    $("#message-content").append(msg);
                    $("#myModal").modal();
                }
            }, error:function(msg){

                $("#message-content").empty();
                $("#message-content").append('<span style="color:red;font-weight: bolder;">充值失败，请联系客服</span>');
                $("#myModal").modal();
            }
        });
    }
    //扫描二维码
    document.querySelector('#saoyisao').onclick = function() {
        wx.scanQRCode({
            needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有
            success : function(res) {
                var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                if(result.indexOf(",")>=0){
                    var tempArray = result.split(',');
                    var tempNum = tempArray[1];
                    account=tempNum;
                    $("input[name='account']").prop('value', account);
                }else{
                    $("input[name='account']").prop('value', result);
                    account=result;
                }
                ServerQueryAccount(account);
            }
        });
    };
    function getMore(type) {
        if(type=='all'){
            $('.more-class').html(
                `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...`
            );
            setTimeout(function () {
                zoneFun(zoneAll, 0, products);
                $('.more-class').html(
                    '更多'
                );
            },2000);
        }
    }
    $("#ddbtn").mouseenter(function () {
        $(this).dropdown("toggle");
    }).mouseleave(function () {
        $(this).dropdown("toggle");
    });
    $("#ddmenu").mouseenter(function () {
        $("#ddbtn").dropdown("toggle");
    }).mouseleave(function () {
        $("#ddbtn").dropdown("toggle");
    });


    $('#ddmenu>li').each(function (index) {
        $(this).click(function () {
            //默认排序
            // console.log(index);
            if(index==0){
                $('.tab-product .tab-content .active').empty();
                $('.tab-product .tab-content .active').append('<ul></ul>');
                for(let i=0;i<defaultArray.length;i++){
                    $('.tab-product .tab-content .active>ul').append(defaultArray[i])
                }
                return;
            }
            //降序排序
            else if(index==1){
                for(let i=0;i<array.length;i++){
                    for (let j=0;j<array.length-i-1;j++){
                        prev = array[j].find('.product-price').html();
                        after = array[j+1].find('.product-price').html();
                        if(parseFloat(prev) < parseFloat(after)){
                            let temp = array[j+1];
                            array[j+1]=array[j];
                            array[j]=temp;
                        }
                    }
                }
            }
            //升序排序
            else if(index==2){
                for(let i=0;i<array.length;i++){
                    for (let j=0;j<array.length-i-1;j++){
                        prev = parseFloat(array[j].find('.product-price').html()).toFixed(2);
                        after = parseFloat(array[j+1].find('.product-price').html()).toFixed(2);
                        if(parseFloat(prev) > parseFloat(after)){
                            let temp = array[j+1];
                            array[j+1]=array[j];
                            array[j]=temp;
                        }
                    }
                }
            }
            //清空原本列表，将排序的商品数组添加上去
            $('.tab-product .tab-content .active').empty();
            $('.tab-product .tab-content .active').append('<ul></ul>');
            for(let i=0;i<array.length;i++){
                $('.tab-product .tab-content .active>ul').append(array[i])
            }
            $('.product-list').click(function (e) {
                $('.product-list').children('.radio_type').prop('checked', false);
                $(this).children('.radio_type').prop('checked', true);
            });
        })
    });



</script>

